
import advListView from '$v/advList'
import { addAdvRequest, advListRequest, deleteAdvRequest, getUpdateDataRequest, updateAdvRequest } from '../api/adv'

//封装一个获取所有广告列表的函数
//需要传入两个数据,一个是每页展示几条数据,一个是当前是哪一页
//每页展示3条,需要展示456条数据
const getAllAdvList = async (res) => {
  try {
    return await advListRequest()
  } catch (e) {

    alert('查询广告列表出现异常' + e.message)
    if (!e.isLogin) {
      return router.go('/login')
    }
  }
}


export default async (req, res) => {

  const advList = await getAllAdvList()
  res.render(advListView({ advList }))


  //添加广告逻辑

  document.onclick = async function (e) {
    //添加广告逻辑
    if (e.target.id === 'adv-save') {
      //收集表单数据,使用FormData
      //表单数据的获取都是通过name获取
      const myForm = new FormData(document.advForm)
      myForm.get('advTitle')
      myForm.get('advType')
      myForm.get('advOrder')
      myForm.get('advPic')
      if (!myForm.get('advTitle') || !myForm.get('advType') || !myForm.get('advOrder') || !myForm.get('advPic')) {
        return alert('添加的内容不能有空的')
      }

      //请求需要写到api里去
      //发送请求
      try {
        await addAdvRequest(myForm)
        alert('添加广告成功')
        //添加广告成功后,关闭这个表单
        document.querySelector('#addClose').click()
        //清空表单
        document.advForm.reset()

        //添加成功把预览的图片隐藏
        const oPreImg = document.querySelector('#preImg')
        oPreImg.style.display = 'none'

        //添加广告成功刷新页面
        const advList = await getAllAdvList()
        res.render(advListView({ advList }))


      } catch (e) {
        alert('添加广告异常' + e.message)
        if (!e.isLogin) {
          //没有登录,关闭这个表单
          document.querySelector('#addClose').click()
          return router.go('/login')
        }
      }
    }

    //删除广告逻辑
    if (e.target.nodeName === 'BUTTON' && e.target.classList.contains('btn-delete')) {
      const _id = e.target.dataset.id
      try {
        await deleteAdvRequest({
          params: { _id }
        })
        alert('删除成功')
        const advList = await getAllAdvList()
        res.render(advListView({ advList }))

      } catch (e) {
        alert('删除数据库时出错' + e.message)
      }
    }


    //点击更新获取表单逻辑
    if (e.target.nodeName === 'BUTTON' && e.target.classList.contains('btn-update')) {
      //id是dom元素上的一个属性,不需要结构赋值
      const _id = e.target.dataset.id
      // console.log(_id);
      try {
        //点击更新按钮时,根据_id获取这个更新按钮所在的广告的信息
        //后端需要根据id值在数据库中查询到这个广告信息发送回来
        const findResult = await getUpdateDataRequest(_id)
        // console.log(findResult);
        document.updateForm.advTitle.value = findResult.advTitle
        document.updateForm.advType.value = findResult.advType
        document.updateForm.advOrder.value = findResult.advOrder

        document.querySelector('#adv-update').dataset.id = findResult._id
      } catch (e) {
        alert('获取更新按钮数据时出错' + e.message)
      }
    }


    //点击更新向后端发送需要修改的数据,后端修改,前端关闭表单,重新加载页面
    if (e.target.id === 'adv-update') {
      //当点击的按钮是adv-update时发送修改广告的请求
      //100行逻辑,在点击红色的更新按钮时,给里面的更新按钮添加一个_id属性
      const _id = e.target.dataset.id
      console.log(_id);


      const myForm = new FormData(document.updateForm)
      console.log(myForm.get('advTitle'));
      try {
        await updateAdvRequest(myForm, _id)
        //发送数据后重新渲染数据
        const advList = await getAllAdvList()
        res.render(advListView({ advList }))

        document.querySelector('.modal-backdrop').style.display = "none";


        console.log('发送成功');
      } catch (e) {
        alert('点击更新时出现问题' + e.message)
        //判断是否是权限异常
        if (!e.isLogin) {
          //关闭添加广告的弹窗再跳转
          document.getElementById("updateClose").click();
          return router.go("/login");
        }
      }

    }


    //点击页码,每页展示固定条数的数据逻辑
    //1.advList请求中,需要传入两个参数,everyNum,pageNo 通过路径传输,在advListRequest请求中,发送请求时,形参是上面两个,请求里路径拼接,形参可以设置默认值
    //2.后端发送请求时,在数据库查询筛选,limit(everyNum).skip((pageNo-1)*3)
    //3.后端发送回来的数据,1.advlist:findResult/用来渲染页面 2.pageCount总页数:{math.ceil(advmodel.count({})[所有数据]/everyNum)}=广告总数/每页数量再向上取整  用来渲染页码
    //4.判断当前点击的页码(如果点击的是span,且父元素是page),获取当前点击的是哪个页码const pageNo = +e.target.dataset.pageno; 把这个pageNo作为实参给getAllAdvList  重新发送请求               声明 getAllAdvList时的形参传给advListRequest(everyNum,pageNo)



    //调用getAllAdvList  获取advlist 在下面作为实参,渲染页面,获取pageCount渲染页码
    //     const {
    //   advList,
    //   pageCount
    // } = await getAllAdvList(pageNo)   
    // res.render(advListView({
    //   advList,
    //   pageCount
    // })) 



  }

  //预览
  document.onchange = function (e) {
    if (e.target.id === 'advPic') {
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = function (e) {
        const oPreImg = document.querySelector('#preImg')
        oPreImg.src = e.target.result
        oPreImg.style.display = 'block'
      }
    }
  }

}